import React, { useState, useEffect } from 'react';
import { useForm } from 'react-hook-form';

const App = () => {
    const [novels, setNovels] = useState([]);
    const [currentNovel, setCurrentNovel] = useState({});
    const [tweetContent, setTweetContent] = useState('');
    const [tweetList, setTweetList] = useState([]);
    const { register, handleSubmit, errors } = useForm();

    useEffect(() => {
        const storedNovels = localStorage.getItem('novels');
        if (storedNovels) {
            setNovels(JSON.parse(storedNovels));
        }
    }, []);

    const handleAddNovel = (data) => {
        const newNovel = { title: data.title, content: data.content };
        setNovels([...novels, newNovel]);
        localStorage.setItem('novels', JSON.stringify([...novels, newNovel]));
    };

    const handleSelectNovel = (novel) => {
        setCurrentNovel(novel);
    };

    const handleTweet = () => {
        const newTweet = { content: tweetContent, novel: currentNovel.title };
        setTweetList([...tweetList, newTweet]);
        setTweetContent('');
    };

    return (
        <div className="container mx-auto p-4">
            <h1 className="text-3xl font-bold mb-4">小说推文全流程APP</h1>
            <div className="flex flex-wrap justify-between">
                <div className="w-full md:w-1/2 xl:w-1/3 mb-4">
                    <h2 className="text-2xl font-bold mb-2">添加小说</h2>
                    <form onSubmit={handleSubmit(handleAddNovel)}>
                        <input
                            type="text"
                            placeholder="小说标题"
                            {...register('title')}
                            className="block w-full p-2 mb-2 border border-gray-400"
                        />
                        <textarea
                            placeholder="小说内容"
                            {...register('content')}
                            className="block w-full p-2 mb-2 border border-gray-400"
                        />
                        <button
                            type="submit"
                            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
                        >
                            添加
                        </button>
                    </form>
                </div>
                <div className="w-full md:w-1/2 xl:w-1/3 mb-4">
                    <h2 className="text-2xl font-bold mb-2">选择小说</h2>
                    <ul>
                        {novels.map((novel) => (
                            <li key={novel.title}>
                                <button
                                    onClick={() => handleSelectNovel(novel)}
                                    className="bg-gray-200 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded"
                                >
                                    {novel.title}
                                </button>
                            </li>
                        ))}
                    </ul>
                </div>
                <div className="w-full md:w-1/2 xl:w-1/3 mb-4">
                    <h2 className="text-2xl font-bold mb-2">推文</h2>
                    <input
                        type="text"
                        value={tweetContent}
                        onChange={(e) => setTweetContent(e.target.value)}
                        placeholder="推文内容"
                        className="block w-full p-2 mb-2 border border-gray-400"
                    />
                    <button
                        onClick={handleTweet}
                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
                    >
                        推文
                    </button>
                    <ul>
                        {tweetList.map((tweet) => (
                            <li key={tweet.content}>
                                <p>
                                    {tweet.content} - {tweet.novel}
                                </p>
                            </li>
                        ))}
                    </ul>
                </div>
            </div>
        </div>
    );
};

export default App;